<template>
  <view>
    <view class="publishContain defaultMain">
        <u-cell-group>
          <u-cell-item :arrow="false" class="paiTitle" required>
            <u-field
              :border-bottom="false"
              v-model="title"
              label="标题"
              placeholder="请填写标题"
              @blur="handleTitle"
            >
            </u-field>
          </u-cell-item>
<!--        </u-cell-group>-->
<!--        <u-cell-group>-->
          <u-cell-item arrow-direction="down" class="paiTitle" title="事件标签" :value="category_name" @click="show = true" required>
          </u-cell-item>
        </u-cell-group>
      <u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>


        <mypicture ref="mypicture" type="submit" @takePic="handlePic" :album-list="takePicList">
          <view><text style="color:red;margin-right: 5rpx;">*</text>拍照</view>
        </mypicture>


      <myvideo ref="myvideo" type="submit" @takeVideo="handleVideo" :old-video-list="videoList">
        <view>录像</view>
      </myvideo>
      <!-- 描述 -->
      <view class="desStyle">
        <view style="display: flex;justify-content: space-between;">
          <view style="margin-bottom: 26rpx;">描述</view>
          <image
            @click="showMap"
            style="width: 50rpx;height: 50rpx;"
            src="/static/img/icons/mark_blue.png"
            mode="scaleToFill"
          />
        </view>
        <u-input
          v-model="description"
          :type="type"
          :border="border"
          :width="width"
          :height="height"
          :auto-height="autoHeight"
          placeholder="请输入上报描述"
          @blur="handleDesc"
        />
      </view>
      <!-- 提交按钮 -->
      <view class="suishoupaiButton">
        <u-button
          type="primary"
          :ripple="true"
          ripple-bg-color="#74b9ff"
          @click="submitSuiShouPai"
          >上报提交</u-button
        >
      </view>
    </view>
    <mapselect
      ref="mapSelect"
      v-show="mapVisible"
      @saveMap="saveMap"
    ></mapselect>
  </view>
</template>
<script>
import mypicture from "../picvideo/picture.vue";
import myvideo from "../picvideo/video.vue";
import mapselect from "../map/map.vue";
import {categoryList, submit, contentInfo, contentEdit} from "../../../common/api/suishoupai";
import {checkToken} from "../../../common/api/common";

export default {
  name: "SuishouSubmit",
  components: {
    mapselect,
    mypicture,
    myvideo,
  },
  onLoad (options) {
    // 检查Token是否过期
    checkToken()
    this.options = options
    uni.showLoading({
      title: '加载中',
      mask: true
    });
    categoryList().then(res => {
      uni.hideLoading()
      // console.log('categoryList', res)
      this.list = res;
    })
  },
  onShow () {
    // console.log('eeeeeeeeeee', this.$refs.mypicture)
    if (this.options.encodedData !== 'undefined') {
      const content_id = this.$Router.extract(this.options).content_id
      contentInfo({content_id: content_id}).then(res => {
        // console.log('suisubmit---', typeof res.imgs, res)
        this.content_id = res.content_id
        this.title = res.name
        this.category_id = res.category_id
        this.category_name = res.category_name
        this.description = res.description
        this.takePicList = res.imgs
        this.$refs.mypicture.$data.takePicList = res.imgs
        this.videoList = res.videos
        this.$refs.myvideo.$data.videoList = res.videos
        this.photographFree.latitude = res.latitude
        this.photographFree.longitude = res.longitude
      })
    } else {
      // 检查是否有缓存
      try {
        this.title = uni.getStorageSync('title')
        this.category_id = uni.getStorageSync('category_id')
        this.category_name = uni.getStorageSync('category_name')
        this.description = uni.getStorageSync('description')
        this.takePicList = uni.getStorageSync('picList')
        this.videoList = uni.getStorageSync('videoList')
        this.photographFree.latitude = uni.getStorageSync('latitude')
        this.photographFree.longitude = uni.getStorageSync('longitude')
      } catch (err) {

      }
    }
  },
  data() {
    return {
      content_id: 0,
      title: '',
      takePicList: [],
      videoList: [],
      // 地图
      mapVisible: false,
      photographFree: {
        latitude: null,
        longitude: null,
      },
      // 描述
      description: '',
      type: "textarea",
      border: true,
      width: 750,
      height: 150,
      autoHeight: true,
    //  类别
      show: false,
      category_id: 0,
      category_name: '',
      list: []
    };
  },
  methods: {
    confirm(e) {
      this.category_id = e[e.length-1].value
      this.category_name = e[e.length-1].label
      uni.setStorageSync('category_id', this.category_id)
      uni.setStorageSync('category_name', this.category_name)
    },
    showMap() {
      this.mapVisible = true;
      this.$refs.mapSelect.reAuth(
        this.photographFree.longitude,
        this.photographFree.latitude
      );
      uni.setNavigationBarTitle({
        title: "随手拍定位",
      });
    },
    // 坐标保存
    async saveMap(point) {
      // console.log('saveMap---', point)
      this.mapVisible = false
      this.photographFree.latitude = point.latitude
      this.photographFree.longitude = point.longitude
      uni.setStorageSync('latitude',point.latitude)
      uni.setStorageSync('longitude',point.longitude)
      uni.setNavigationBarTitle({
        title: "随手拍提交",
      });
    },
    handleTitle () {
      uni.setStorageSync('title',this.title)
    },
    handleDesc () {
      uni.setStorageSync('description', this.description)
    },
    handlePic (value) {
      // console.log('handlePic------', value)
      this.takePicList = value
      // this.takePicList.push(value.result.url)
      uni.setStorageSync('picList',this.takePicList)
    },
    handleVideo (value) {
      // console.log('handleVideo-------', value)
      // this.videoList.push(value.result.url)
      this.videoList = value
      uni.setStorageSync('videoList',this.videoList)
    },
    reset () {
      uni.showToast({
        title: '上报成功',
        icon: 'success',
        mask: true,
      });
      // 清屏
      this.title = ''
      this.description = ''
      this.category_id = 0;
      this.category_name = ''
      this.takePicList = []
      this.$refs.mypicture.init()
      this.$refs.myvideo.init()
      this.videoList = []
      this.photographFree = {}
      //  清除缓存
      uni.removeStorageSync('title')
      uni.removeStorageSync('category_id')
      uni.removeStorageSync('category_name')
      uni.removeStorageSync('description')
      uni.removeStorageSync('picList')
      uni.removeStorageSync('videoList')
      uni.removeStorageSync('latitude')
      uni.removeStorageSync('longitude')
    },
    submitSuiShouPai() {
      let _self = this
      if (!this.title) {
        uni.showToast({
          title: "请填写标题",
          icon: "error",
          mask: true
        })
        return
      }
      if (!this.category_id) {
        uni.showToast({
          title: "请选择事件标签",
          icon: "error",
          mask: true
        })
        return
      }
      if (this.takePicList.length === 0) {
        uni.showToast({
          title: "请拍照或上传",
          icon: "error",
          mask: true
        })
        return
      }
      // console.log(this.photographFree)
      if (!this.photographFree.latitude) {
        uni.showToast({
          title: "请点标记定位",
          icon: "error",
          mask: true,
        })
        return
      }
      const _userInfo = uni.getStorageSync('_userInfo')
      let Data = {
        name: this.title,
        category_id: this.category_id,
        description: this.description,
        latitude: this.photographFree.latitude,
        longitude: this.photographFree.longitude,
        submit_user_id: _userInfo.admin_user_id
        // openId: _userInfo.openId
      }
      // console.log(JSON.stringify(Data))
      if (this.content_id === 0) {
        if (this.takePicList) {
          Data.imgs = this.takePicList.map(element => element.result)
        }
        if (this.videoList) {
          Data.videos = this.videoList.map(element => element.result)
        }
        submit(Data).then(res => {
          _self.reset()
        })
      } else {
        Data.content_id = this.content_id
        // console.log('修改提交', this.takePicList)
        if (this.takePicList) {
          Data.imgs = this.takePicList.map(element => {
            if(element.result) {
              return element.result
            }
            return element
          })
        }
        if (this.videoList) {
          Data.videos = this.videoList.map(element =>{
            if(element.result) {
              return element.result
            }
            return element
          })
        }
        // console.log('修改提交', Data.imgs)
        contentEdit(Data).then(res => {
          _self.reset()
        })
      }

    },
  },
};
</script>
<style lang="scss" scoped>
.publishContain {
  padding: 0 0 150rpx;
  background-color: #fff;
}
/deep/ .paiTitle .u-field {
  padding: 0 0 0 14rpx;
}
.desStyle {
  padding: 20rpx;
  background-color: #fff;
}
.suishoupaiButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 148rpx;
  box-sizing: border-box;
  padding: 0 30rpx;
  position: fixed;
  background-color: #ffffff;
  bottom: 0;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  z-index: 999;
}
.suishoupaiButton u-button {
  width: 100%;
  border-radius: 10rpx;
}
</style>
